<style>
.brandDoc .el-input__icon {
  line-height: 30px;
}
.brandDoc .Bran_top .el-input__inner {
  width: 160px;
  height: 30px;
}
.brandDoc .Bran_top .el-input {
  width: 160px;
  height: 30px;
}
.brandDoc .el-icon-success,
.brandDoc .el-icon-delete {
  margin-right: 7px;
}
.brandDoc .el-button {
  padding: 8px 15px;
  margin-right: 12px;
  height: 30px;
}
.brandDoc .el-button + .el-button {
  margin-left: 0;
}
</style>

<style scoped>
.brandDoc {
  margin-right: 15px;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  white-space: nowrap;
  position: relative;
}
.Bran_top {
  height: 60px;
  display: flex;
  padding-top: 14px;
  border-bottom: 2px solid #f4f4f4;
}
.Bran_w {
  padding: 2px 6px 0 0;
}
.l {
  margin-left: 16px;
}
.Bran_button {
  margin: 15px 0;
}

.footView span {
  float: left;
  margin-right: 48px;
  line-height: 6vh;
  font-size: 14px;
}
.footView span i {
  margin-right: 5px;
}
</style>

<template>
  <!-- 品牌建档 -->
  <div class="brandDoc">
    <div class="Bran_top">
      <!-- <p class="Bran_w">编号</p>
      <el-input v-model="id"></el-input> -->
      <p class="Bran_w l">品牌</p>
      <el-input v-model="name"></el-input>
      <p class="Bran_w l">条码规律/品牌公司</p>
      <el-select v-model="brandedCompany" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <p class="Bran_w l">厂进折数</p>
      <el-input
        v-model="discount"
        @keyup.enter.native="preservation"
      ></el-input>
    </div>
    <!-- 按钮 -->
    <div class="Bran_button">
      <el-button
        @click="preservation"
        type="primary"
        icon="el-icon-folder-checked"
        >保存</el-button
      >
      <el-button @click="dele"><i class="el-icon-delete"></i>删除</el-button>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      height="68.8vh"
      @row-click="rowClick"
      highlight-current-row
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
    >
      <el-table-column prop="name" label="品牌" width="220"> </el-table-column>
      <el-table-column prop="brandedCompany" label="品牌公司" width="220">
      </el-table-column>
      <el-table-column prop="discount" label="厂进折数" show-overflow-tooltip>
      </el-table-column>
    </el-table>

    <foot-view
      class="footView"
      :hasPagination="true"
      :pagesNum="pagesNum"
      :pageSize="limit"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <div slot="text">
        <span>数据库：{{ jxQuarter }}</span>
      </div>
    </foot-view>
  </div>
</template>

<script>
import {
  getBranded,
  postBranded,
  deleteBranded,
  putBranded,
  getBrandedCompanyList
} from '../../../network/branded'
import { getBarCode } from '../../../network/manufacturer'
import CostDocVue from '../CostDoc/CostDoc.vue'
import footView from '../../../components/FootView'
import enterUp from '../../../components/mixins/enterUp'

export default {
  name: 'brandDoc',
  mixins: [enterUp],
  created() {
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null

    this.inpList = this.getInput()
    let params = {
      limit: this.limit,
      page: 1
    }
    this._getBranded(params)
    // 总条数，页码赋值
    getBranded({ limit: 99999 }).then((res) => {
      this.dataLen = res.data.total
      // console.log(this.dataLen)
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    })

    getBarCode({ limit: 99999 }).then((res) => {
      this.list = res.data.data
      this.list.forEach((e) => {
        this.options.push({ label: e.company, value: e.company })
      })
    })
  },

  data() {
    return {
      inpList: [],
      options: [],
      tableData: [],
      id: '',
      brandedCompany: '',
      name: '',
      discount: '10',
      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      ti: [],
      ta: [],
      jxQuarter: null
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  watch: {
    dataLen(a, b) {
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    }
  },
  components: {
    footView
  },
  methods: {
    //删除
    dele() {
      if (this.id == '') {
        this.$message({
          type: 'warning',
          offset: 400,
          message: '请选择要删除的数据'
        })
        return
      }
      let obj = { id: this.id }
      this.$confirm('此操作将永久删除本条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteBranded(obj).then((res) => {
            // console.log(res.data)
            if (res.data.code == 200) {
              this._getBranded({ limit: this.limit, page: this.currentPage })
              this.dataLen--
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else if (res.data.code == 204) {
              this.$message.error({
                message: '该数据有关联数据,删除失败!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            offset: 400,
            message: '已取消删除'
          })
        })
    },
    preservation() {
      let obj = {
        id: this.id,
        name: this.name,
        brandedCompany: this.brandedCompany,
        discount: this.discount
      }
      let obj1 = {
        name: this.name,
        brandedCompany: this.brandedCompany,
        discount: this.discount
      }
      for (const i of this.tableData) {
        if (i.name == this.name) {
          //修改
          this.$confirm('此操作将修改此品牌的数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              putBranded(obj)
                .then((res) => {
                  this.$message({
                    type: 'success',
                    offset: 400,
                    message: '修改成功!'
                  })
                  this._getBranded({
                    limit: this.limit,
                    page: this.currentPage
                  })
                })
                .catch((err) => {
                  console.log(err)
                })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                offset: 400,
                message: '已取消修改'
              })
            })
          return
        }
      }
      postBranded(obj1).then((res) => {
        if (this.brandedCompany == '' || this.name == '') {
          this.$message({
            type: 'warning',
            offset: 400,
            message: '品牌，品牌公司不能为空!'
          })
          return
        }
        // console.log(res)
        if (res.data.code == 200) {
          this.dataLen++
          this.$message({
            type: 'success',
            offset: 400,
            message: '添加成功'
          })
        } else {
          this.$message.error({
            offset: 400,
            message: '添加失败品牌不能重复'
          })
        }
        this._getBranded({ limit: this.limit, page: this.currentPage })
      })
    },

    //获取数据
    _getBranded(params = {}) {
      getBranded(params).then((res) => {
        // console.log(res)
        this.tableData = res.data.data
        this.id = ''
        this.name = ''
        this.brandedCompany = ''
        this.discount = ''
        if (this.tableData.length == 0 && this.currentPage > 1) {
          this.currentPage--
          this._getArtNo({ limit: this.limit, page: this.currentPage })
        }
      })
    },
    rowClick(e) {
      this.name = e.name
      this.discount = e.discount
      this.brandedCompany = e.brandedCompany
      this.id = e.id
      // console.log(this.id)
    },

    // 每页显示页数改变
    handleSizeChange(val) {
      this.limit = val
      // 总页码赋值
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
      this._getBranded({ limit: this.limit, page: this.currentPage })
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.currentPage = val
      this._getBranded({ limit: this.limit, page: this.currentPage })
    }
  }
}
</script>
